SEQ 01
Two equal accents
Glass and sodium, the two banks of the river. Neither is primary, neither is the warning colour.
DigiLuko · Free HTML template 03
Drawn from the short story Version Conflict
Winbon
Built for archives
Two equal accents, every surface a record, nothing ever deleted. Ten pages, one script and a single token file that re-skins the whole thing.
Live 05:02 Dark & light No build step
What you get
A template that keeps records
Six decisions carry the whole system. Each one comes from the city in the story, and each one is a variable or a class you can change.
SEQ 02
Every surface a record
Cards, entries, tables and code carry a header: a sequence number, a time, a fingerprint, a lock.
SEQ 03
Nothing is deleted
Disabled, archived, the old price: one shared inactive state. It loses its contour, never its existence.
SEQ 04
Depth from fog
No glow, no drop shadows. Layers are translucent planes with a blur, like windows stacked on a monitor.
SEQ 05
Set like a report
Flush left, block paragraphs, a timestamp where a drop cap would be. Headlines in a newspaper serif.
SEQ 06
No build step
Open the folder, edit the HTML, refresh. Vanilla CSS and one script, readable by a person and by a machine.
Two versions
One sequence number, two records
An ambulance call-out arrived twice, with the same sequence ID and the same time. Both passed validation, both were locked, and both will stay. The archive does not judge content — only format.
The twin record is that moment as a component: compare, before and after, two plans, two readings of one event. Neither side is highlighted as the winner.
SEQ 0041-87701:20:00A
Call-out dispatched
The crew arrives in time. The patient is handed over to the hospital.
SEQ 0041-87701:20:00B
Unit remains at station
The ambulance never sets out. The call-out never happens.
The figures
What the depository holds
10Pages
2Equal accents
10Specimen files
0Records deleted
Under the record
How it is put together
Six values and two versions
The core palette is six variables plus four accents: glass and sodium for the two versions, a diode for “live” and a red pencil for the analyst. Nothing below the tokens file spells a colour, which is why the light theme costs one stylesheet link.
css/tokens.css
:root {
--bg0: #0a1020; /* blue hour */
--fg0: #e3e7ee; /* tube light */
--acc-glass: #5ec4de; /* version A */
--acc-sodium: #e8604f; /* version B */
}Four shared stylesheets, one script
Tokens re-skin, base sets the type, layout builds the skeleton, components hold the reusable parts, and every page adds at most one file of its own. Delete a section and its rules simply go unused.
tree
css/
tokens.css the only theme layer
tokens-light.css its mirror
base.css
layout.css
components.css
landing.css index.html only
blog.css blog + blogpost
portfolio.css
shop.css + product, cart
legal.css
js/
main.jsA header holds it together
Where another system bolts a surface down with rivets, Winbon gives it an identity: a thin mono strip with a sequence number in sodium, a time and a lock. Card, entry, table and code block are all one object wearing different content.
markup
<article class="record">
<div class="record__head">
<span class="seq">SEQ 0041-877</span>
<span>01:20:00</span>
</div>
<div class="record__body">…</div>
</article>SEQ 0042-001preview
Department of inactive branches
Live
None of these parts names a colour. They read one variable, and the variable is the only thing the switches beside them change.
Re-skin bench
Change one variable
Pick an accent and watch the dot, the bar, the badge and both buttons follow at once. This is not four designs — it is one design reading one token.
Scenes
Drawn, then locked
Every picture in the template is a drawn scene of Winbon, rendered to WebP and stamped with its own record header. Drop your photographs into the same slots — the drawn panel underneath stays as the fallback.
The bridge
Five in the morning. Mist on the river, a week off ahead.
The basement
Upstairs marble, downstairs concrete and one flickering tube.
The monitors
Translucent windows layered until the pattern shows.
The zone
Corrugated iron, a cone of sodium light, one green diode.
The left bank
Glass towers, lit windows stacked in rows above the water.
The right bank
Cobblestones under a sodium lamp, the old town keeping its own time.
The printout
Green-bar paper, one sequence ringed in red pencil.
The rack
Two towers in the dark, blue and green diodes counting the records.
The tablet
Linear A incised in clay, the oldest version still unread.
Many formats
One identity, beyond the browser
The same tokens drive more than the site. The bundle ships a Word document, a PDF, an ebook, a spreadsheet and a slide deck in the Winbon style — dark and light — plus thin stylesheets for print, EPUB, slides and code, and a style brief you can hand to any tool.
Dark / light
The same record, both versions
These are not two screenshots. They are two copies of the same markup, one in a dark token scope and one in a light one, reading the same stylesheet. Drag the fork.
SEQ 0041-877 · version A
The blue hour
Nothing in this block names a colour. It asks for a ground, a text colour and an accent, and the scope it sits in decides what those are.
Licences
Two plans, no winner
A pricing block is part of any landing template, so here it is, wired up — two plans under one header, neither marked as the popular one. The template you are looking at costs nothing.
SEQ 0042-100licenceA
Free
0 forever
- Every page and stylesheet
- Dark and light themes
- Specimen files and adapters
- Credit in the footer
SEQ 0042-100licenceB
Studio
19 / month 180 / year
- Everything in Free
- No footer credit required
- Unlimited client projects
- Email support
Questions
Before you download
Do I need a build step?
No. Open the folder, edit the HTML, refresh the browser. There is no bundler, no package manager and nothing to keep upgraded.
How do I change the colours?
Edit css/tokens.css and its mirror css/tokens-light.css. Nothing else in the template spells a colour, so the two files are the entire theme.
Can I use it commercially?
Yes — use it, change it and sell what you build with it. The only ask is that the credit stays in the footer.
Why are there two accent colours and no primary?
Because the story is about two versions that are both valid. Glass carries interaction, sodium carries records and time — but neither is ever used to mean “right” or “wrong”.
Where are the images?
Every picture is one of the drawn scenes, rendered to WebP. Drop your own photographs into the same slots — the drawn panel underneath stays as the fallback, and the optional duotone class ties any photo to the palette.
Where Winbon comes from
A city out of a short story
Winbon is not a mood board. It is a place: the city on the Danube from Version Conflict, a story in Luko Karavan's Antihistor cycle. The glass bank and the cobbled bank, the depository that forgets nothing, the department of inactive branches in the basement — they all come from there.
Every drawn scene, every record header and the whole two-versions palette is that story translated into CSS. The story itself is in English on Substack.
Once that information has been radiated out into the world, it is never lost.
Version Conflict
Ready
Lock the record
One folder, one token layer, one script. Free to use, change and ship.